<template>
  <div class="container">
    <div class="clearfix">
      <el-button
        class="commonBut saveBtn funComBut fl"
        icon="icon iconfont iconbianji"
        @click="edit"
        v-if="isShowEdit"
      >
        <span class="opetareText">编辑</span>
      </el-button>
    </div>
    <div class="mainCon">
      <div
        class="infoBox"
        v-for="(item, i) in activeName == '0' ? checkList : ryCheckList"
        :key="i"
      >
        <div class="secondaryTitle secondaryTitleTheme">{{ item.lable }}</div>
        <div>
          <el-checkbox-group
            v-model="checkValue"
            @change="getChecked"
            v-if="activeName == '0'"
          >
            <el-checkbox
              v-for="(items, index) in item.children"
              :label="items"
              :key="index"
              class="checkBox"
              :disabled="items.isDisabled"
              >{{ items.name }}</el-checkbox
            >
          </el-checkbox-group>
          <el-checkbox-group
            v-model="ryCheckValue"
            @change="getCheckedry"
            v-else
          >
            <el-checkbox
              v-for="(items, index) in item.children"
              :label="items"
              :key="index"
              class="checkBox"
              :disabled="items.isDisabled"
              >{{ items.name }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
      </div>
    </div>
    <div style="text-align: center" v-show="isShowBut">
      <el-button
        class="submitBtn listAddBtn"
        size="medium"
        @click="save"
        :loading="loading"
        >保存</el-button
      >
      <el-button class="cancelBtn rejectFrom" size="medium" @click="cancel"
        >取消</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  name: 'fieldSet',
  components: {},
  props: {
    activeName: {
      type: String,
    },
  },
  data() {
    return {
      checkValue: [],
      checkList: [],
      newArr: [],
      isDisabled: true,
      ryCheckList: [],
      ryNewArr: [],
      ryCheckValue: [],
      isShowBut: false,
      loading: false,
      isShowEdit: true,
    }
  },
  watch: {
    activeName(val, oldVal) {
      if (this.activeName == '0') {
        this.getData('PROJECT_BUILD')
        this.isShowBut = false
        this.newArr = []
        this.checkValue = []
        this.loading = false
        this.isShowEdit = true
      } else {
        this.getData('EMPLOYEE_ADD')
        this.isShowBut = false
        this.ryNewArr = []
        this.ryCheckValue = []
        this.loading = false
        this.isShowEdit = true
      }
    },
  },
  created() {
    this.getData('PROJECT_BUILD')
  },
  methods: {
    getData(mainType) {
      this.axios({
        method: 'post',
        url: 'api-m/fieldconfig/base/getfieldconfig',
        data: {
          mainType: mainType,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            if (mainType == 'PROJECT_BUILD') {
              this.checkList = response.data.result
              this.checkList.forEach((element) => {
                element.children.forEach((item) => {
                  this.$set(item, 'isDisabled', true)
                  this.newArr.push(item)
                  if (item.isNeed == 1) {
                    this.checkValue.push(item)
                  }
                })
              })
            } else {
              this.ryCheckList = response.data.result
              this.ryCheckList.forEach((element) => {
                element.children.forEach((item) => {
                  this.$set(item, 'isDisabled', true)
                  this.ryNewArr.push(item)
                  if (item.isNeed == 1) {
                    this.ryCheckValue.push(item)
                  }
                })
              })
            }
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    getChecked() {},
    // 编辑
    edit() {
      this.isShowBut = true
      this.isShowEdit = false
      if (this.activeName == '0') {
        this.newArr.forEach((element) => {
          if (element.showCheckbox == 1) {
            element.isDisabled = false
          } else {
            element.isDisabled = true
          }
        })
      } else {
        this.ryNewArr.forEach((element) => {
          if (element.showCheckbox == 1) {
            element.isDisabled = false
          } else {
            element.isDisabled = true
          }
        })
      }
    },
    // 保存
    save() {
      this.loading = true
      if (this.activeName == '0') {
        this.newArr.forEach((element) => {
          element.isDisabled = true
          element.isNeed = 0
          this.checkValue.forEach((item) => {
            if (element.id == item.id) {
              element.isNeed = 1
            }
          })
        })
        this.saveData(this.newArr)
      } else {
        this.ryNewArr.forEach((element) => {
          element.isDisabled = true
          element.isNeed = 0
          this.ryCheckValue.forEach((item) => {
            if (element.id == item.id) {
              element.isNeed = 1
            }
          })
        })
        this.saveData(this.ryNewArr)
      }
    },
    saveData(list) {
      var newList = []
      list.forEach((element) => {
        newList.push({ id: element.id, isNeed: element.isNeed })
      })
      let comments = { fieldConfigVOS: JSON.stringify(newList) }
      this.axios({
        method: 'post',
        url: 'api-m/fieldconfig/base/editbatch',
        data: comments,
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message.success(response.data.msg)
            this.isShowBut = false
            this.isShowEdit = true
            if (this.activeName == '0') {
              this.getData('PROJECT_BUILD')
              this.checkValue = []
              this.newArr = []
            } else {
              this.getData('EMPLOYEE_ADD')
              this.ryCheckValue = []
              this.ryNewArr = []
            }

            list = []
            newList = []
          } else {
            this.$message.error(response.data.errorMsg)
          }
          this.loading = false
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
            this.loading = false
          }
        })
    },
    // 取消
    cancel() {
      if (this.activeName == '0') {
        this.newArr.forEach((element) => {
          element.isDisabled = true
        })
      } else {
        this.ryNewArr.forEach((element) => {
          element.isDisabled = true
        })
      }
      this.isShowBut = false
      this.isShowEdit = true
    },
  },
}
</script>

<style scoped lang="less">
.container {
  padding: 16px 24px;
  .mainCon {
    padding: 0 !important;
    margin-top: 16px;
    .infoBox {
      padding: 16px 16px 32px;
      border: 1px solid #eef0f2;
      margin-bottom: 16px;
      .checkBox {
        margin-top: 22px;
        margin-right: 54px;
        width: 16%;
      }
    }
  }
}
</style>
